<template>
  <div class="wrap">
    <div class="menu">
      <div class="menu-group" v-if="isScreen">
        <div class="el-icon-wrap" style="font-size: 32px;cursor:pointer">
          <i class="el-icon-s-unfold" @click="onLeftDrawer"></i>
        </div>
      </div>
      <div class="menu-group" v-if="!isLogin">
        <div class="menu-item toBorder">
          <router-link to="/login">
            <a target="_self">{{$t('navmenu.login')}}</a>
          </router-link>
        </div>
        <div class="menu-item">
          <router-link to="/login">
            <a target="_self">{{$t('navmenu.signup')}}</a>
          </router-link>
        </div>
      </div>
      <div class="menu-group" v-if="isLogin">
        <div class="menu-item toBorder">
          <router-link to="/person">
            <a target="_self">{{$t('navmenu.selfcenter')}}</a>
          </router-link>
        </div>
        <div class="menu-item">
          <!-- <router-link to="/index"> -->
            <a href="#" target="_self" @click="loginOut">{{$t('navmenu.logout')}}</a>
          <!-- </router-link> -->
        </div>
      </div>
      <div class="menu-group">
        <div class="menu-item toBorder" v-if="!isScreen">
          <!-- <router-link to="/index"> -->
            <a href="javascript:;" target="_self" @click="toIndex()">{{$t('navmenu.homepage')}}</a>
          <!-- </router-link> -->
        </div>
        <div class="menu-item toBorder" v-if="!isScreen">
          <router-link to="/introduce">
            <a target="_self">{{$t('navmenu.introduce')}}</a>
          </router-link>
        </div>
        <div class="menu-item toBorder" v-if="!isScreen">
          <router-link to="/contact">
            <a target="_self">{{$t('navmenu.contact')}}</a>
          </router-link>
        </div>
        <div class="menu-item"> 
           <span @click="changeLangToChinese()">
            中文
          </span>/
          <span @click="changeLangToEnglish()">
            EN
          </span>
           
        </div>
        <div class="menu-item">
          <i class="el-icon-search"></i>
          <router-link to="">
            <a target="_self" @click="onLeftDrawer">{{$t('navmenu.search')}}</a>
          </router-link>
        </div>
      
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { logout } from '../http/api';
import { dispatchEventStroage } from '../utils/tools';

export default {
  emits:['onLeftDrawer', 'onTopDrawer'],
  props: {
    isScreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isLogin: false
    }
  },
  watch: {
    screenWidth(newValue) {
      if(newValue <= 768) {
        this.isScreen = true;
      }else {
        this.isScreen = false;
      }
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    changeLangToChinese() {
      this.$i18n.locale="ch"
      localStorage.setItem("lang","ch");
    },
    changeLangToEnglish(){
      this.$i18n.locale="en"
      localStorage.setItem("lang","en");
    },
    loginOut() {
      logout().then(res => {
        if(res && res.data && res.data.code == 20000) { 
          this.removeLocalStorage()
         }
      })
    },
    removeLocalStorage() {
      localStorage.removeItem("userinfo")
      localStorage.removeItem("name");
      localStorage.removeItem("email");
      localStorage.removeItem("id")
      // localStorage.setItem("token", '');
      localStorage.setItem("isLogin", false);
      const isRemember = JSON.parse(localStorage.getItem("remember"));
      if(!isRemember) {
        localStorage.setItem("username", '');
        localStorage.setItem("password", '');
      }
      this.$router.push({
        path: '/index'
      });
      Message.success("登出成功")
    },
    init() {
      this.isLogin = JSON.parse(localStorage.getItem("isLogin"));
      dispatchEventStroage();
      const that = this;
      window.addEventListener('setItemEvent', function (e) {
        if(e.key && e.key == 'isLogin'){
          that.isLogin = e.newValue
        }
      })
    },
    toIndex() {
      this.$router.replace('/index');
      
    },
    onLeftDrawer() {
      this.$emit("onLeftDrawer")
    },
    onTopDrawer() {
      this.$emit("onTopDrawer")
    }
  }
};
</script>

<style lang="less" scoped>
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 66px;
  background-color: #fff !important;
  border-bottom: 1px solid #666666;
  .menu-group {
    display: flex;
    .menu-item {
      // width: 68px;
      height: 18px;
      line-height: 18px;
      // margin: 0 8px;
      padding: 0 10px;
      color: #333;
      text-align: center;
      font-size: 14px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      a:hover {
        text-decoration: underline;
      }
      .el-icon-search {
        margin-right: 10px;
      }
    }
  }
  .toBorder{
    border-right: 1px solid #333;
  }
}
</style>